<template>
	<view class="search-view">
		<Sheader :title="'车辆VIN码查询'" :background="'#fff'" :color="'#203136'"/>
		<view class="content">
			<u-form >
				<u-form-item label-width="170" >
					<u-icon slot="right" size="40" name="scan" @click="openSearch"></u-icon>
					<u-input v-model="form.idCode" placeholder="请输入货架号或扫描行驶证" maxlength="17" :password-icon="false"/>
				</u-form-item>
			</u-form>
			<u-button class="register-btn" type="primary" @click="sendForm">车辆VIN码查询</u-button>
			<view class="tips-view">
				<text>车架号可以查询哪些内容？</text>
				<text>会员查询收费标准？</text>
			</view>
			<view class="user-info">
				<view class="user-info__box">
					车辆VIN码查询须知：<br/>
					
					1、手机上查询方式分为游客查询和会员查询两种；<br/>
					2、游客查询：过路游客轻松查询，不需要注册开通APP会员账号，输入查询条件后弹出二维码通过微信付款即可查看VIN码信息，每次查询收费26元；若无法查询的VIN码首先会进行提示，不会要求网友付款。<br/>
					3、会员查询：会员查询针对批量查询的客户，首先注册开通APP会员账号，在会员账号里面开通VIN码会员查询功能并提前预存查询费用，查询成功后会自动扣减会员的预存账户余额，直到扣完为止。<br/>
					4、会员查询实行不同的收费标准，会员查询收费标准和开通办法请阅读上面的会员收费标准。<br/>
					5、已经开通VIN码查询的会员账号，每次登陆APP账号后，输入查询条件后点击会员登录查询即可实现查询。
				</view>
			</view>
			<view class="user-bottom">
				上门服务网：www.shangmenfuwu.cc
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-modal v-model="showTip" :content="content" :title="title" @confirm="confirm"></u-modal>
		<view 
			class="video-view"
			v-show="isShowVideo">
			<view class="video-view__box">
				<text class="video-view__text">请将车架号置于框内点击按钮拍摄</text>
			</view>
			<video
				id="webcam"
				loop
				preload
			/>
		</view>
		 </video>
	</view>
</template>

<script>
	import Sheader from '@/components/Sheader/index.vue'
	export default {
		data() {
			return {
				isShowVideo: false,
				showTip: false,
				title: '',
				content: '',
				form: {
					idCode: ''
				}
			}
		},
		components: {
			Sheader
		},
		async onLoad() {
		},
		onUnload() {
		},
		methods: {
			async sendForm() {
				if (!this.$utils.trim(this.form.idCode)) {
					this.content = '请先录入车辆VIN码'
					this.showTip = true
					return false
				}
				const res = await this.$http.request('/carInfo/getByVin', this.form, 'get', true, false).then((res) => {
					console.log(res)
					if (!res.success) {
						this.showTip = true
						this.content = res.msg
						return
					} else {
						this.$utils.gotoPage('./pay?title=123&id=321')
					}
				})
			},
			confirm() {
				// if (this.title == '修改密码成功') {
				// 	uni.reLaunch({
				// 		url: '/pages/user/index'
				// 	});
				// }
			},
			initVideo() {
			  let that = this;
			  this.video = document.getElementById("webcam");
			  setTimeout(() => {
				if (
				  navigator.mediaDevices.getUserMedia ||
				  navigator.getUserMedia ||
				  navigator.webkitGetUserMedia ||
				  navigator.mozGetUserMedia
				) {
				 //调用用户媒体设备, 访问摄像头
				 this.getUserMedia(
					{
					  video: {
						width: {
						  ideal: that.videoWidth,
						  max: that.videoWidth
						},
						height: {
						  ideal: that.videoHeight,
						  max: that.videoHeight
						},
						facingMode: "user",    //前置摄像头
						frameRate: {
						  ideal: 30,
						  min: 10
						}
					  }
					},
					this.videoSuccess,
					this.videoError
				  );
				} else {
				  this.$toast.center("摄像头打开失败,请检查权限设置!");
				}
			  }, 300);
			},
			getUserMedia(constraints, success, error) {
			  if (navigator.mediaDevices.getUserMedia) {
				//最新的标准API
				navigator.mediaDevices
				  .getUserMedia(constraints)
				  .then(success)
				  .catch(error);
			  } else if (navigator.webkitGetUserMedia) {
				//webkit核心浏览器
				navigator.webkitGetUserMedia(constraints, success, error);
			  } else if (navigator.mozGetUserMedia) {
				//firfox浏览器
				navigator.mozGetUserMedia(constraints, success, error);
			  } else if (navigator.getUserMedia) {
				//旧版API
				navigator.getUserMedia(constraints, success, error);
			  }
			},
			videoSuccess(stream) {
			  this.mediaStreamTrack = stream;
			  this.video.srcObject = stream;
			  this.video.play();
			},
			videoError(error) {
			  console.error(error);
			  this.$toast.center("摄像头打开失败,请检查权限设置!");
			},			
			openSearch() {
				const vm = this
                var camera = plus.camera.getCamera(1);
                var res = camera.supportedVideoResolutions[0];
                var fmt = camera.supportedVideoFormats[0];
                camera.captureImage(
                    function(path) {
                        if (path) {
							uni.showLoading({
								mask: true,
								title: '请稍候...'
							})
							plus.io.resolveLocalFileSystemURL(path,function(entry){
								// /**************************** 1 ************************
								var url = entry.toLocalURL()
								var filename = entry.name
								var name="_doc/upload/"+filename;
								plus.zip.compressImage({
									src:url,//src: (String 类型 )压缩转换原始图片的路径    
									dst:name,//压缩转换目标图片的路径    
									quality: 55,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100    
									overwrite:true,//overwrite: (Boolean 类型 )覆盖生成新文件
								}, 
							   function(zip) {  
								   //页面显示图片  
								   var fileReader = new plus.io.FileReader(); 
								   fileReader.readAsDataURL(zip.target);  
								   fileReader.onloadend = function(e) {
										vm.$http.request('/carInfo/upload/vinImg', {
											imgData: e.target.result
										}, 'post', true, false, {'Content-Type': 'application/json'}).then((res) => {
											if (!res.success) {
												vm.showTip = true
												vm.content = res.msg
												return
											} else {
												uni.hideLoading()
												vm.form.idCode = res.data
												uni.showToast({
													title: '识别成功',
													duration: 2000
												});
											}
										})
									}
								},function(error) {
									uni.hideLoading()
								   // plus.nativeUI.toast("压缩图片失败，请稍候再试");    
								});
								// */
							   
							   
							   /**************************** 2 ************************
								entry.file( function(file){
									console.log(file)

									vm.$http.request('/carInfo/upload/imgFile', {
										file: file
									}, 'post', true, false).then((res) => {
										if (!res.success) {
											vm.showTip = true
											vm.content = res.msg
											return
										} else {
											// uni.hideLoading()
											vm.form.idCode = res.data
											uni.showToast({
												title: '识别成功',
												duration: 2000
											});
										}
									})
									// var fileReader = new plus.io.FileReader(); 
									// fileReader.readAsDataURL(file);
									// fileReader.onloadend = function(e) {  
									// var picUrl = e.target.result.toString(); 
									// console.log(e)
									// this.$toast.center(picUrl); 
									// }
								});
								*/
							}); 
							// uni.saveFile({
							//     tempFilePath: path,
							//     success: function(res) {
							//         var savedFilePath = res.savedFilePath;
							//         //将临时文件保存到本地
							//         uni.saveImageToPhotosAlbum({
							//             filePath: savedFilePath,
							//             success: function() {
							//                 ShowToast('拍摄成功')
							//             }
							//         });
							//     }
							// });
						}
						console.log('Capture image success: ' + path);
                    },
                    function(error) {
						uni.hideLoading()
                        console.log('Capture image failed: ' + error.message);
                        //捕获图片失败
                        if (error.message) {
                         console.log('捕获图片失败', error.message)
                        }
                    },
                    {
                        resolution: res,
                        format: fmt
                    }
                );
			}
		}
	}
</script>

<style>
	.search-view {
		position: relative;
	}
	.video-view {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		/* background: #000; */
		z-index: 10000;
	}
	.video-view__box {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 10001;
		box-shadow: rgba(33, 33, 33, 0.8) 0px 0px 1px 2px, rgba(33, 33, 33, 0.8) 0px 0px 0px 5000px;
		width: 80vw;
		height: 15vh;
		border: 2px solid #fff;
		border-radius: 12px;
	}
	.video-view__text {
		position: absolute;
		width: 100vw;
		text-align: center;
		top: -5vh;
		left: 50%;
		transform: translate(-50%, 0);
		color: #fff;
		font-size: 34rpx;
	}
	#webcam {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw !important; 
		height: 100vh !important;
		z-index: 10000;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background: #fff;
		padding-top: 90rpx;
		height: 100vh;
	}
	.title {
		font-family: YouSheBiaoTiHei;
		margin: 32rpx 0;
		font-size: 48rpx;
		font-weight: 800;
		line-height: 48rpx;
		color: #FFFFFF;
		font-style: oblique;
	}
	/deep/ .u-form-item {
		width: 85vw;
	}
	/deep/ .uni-video-container, /deep/ .uni-video-cover {
		background-color: inherit !important;
	}
	.register-check {
		height: 54rpx;
		width: 85vw;
		margin: 24rpx;
	}
	.register-btn {
		margin-top: 20rpx;
		width: 85vw;
	}
	.register-text{
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 32rpx;
		color: #2979FF;
		opacity: 1;
		margin-left: 8rpx;
	}
	/deep/ .uicon-scan {
		color: #2979ff;
		font-size: 44rpx !important;
	}
	.tips-view {
		margin-top: 20rpx;
		width: 85vw;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 34rpx;
		color: #2979FF;
		opacity: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.user-info {
		padding: 30rpx;
		background-color: #fff;
	}
	.user-info__box {
		padding: 24rpx 20rpx;
		border: 1px solid #C0C4CC;
		opacity: 1;
		border-radius: 8rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #303133;
		opacity: 1;		
	}	
	.user-bottom {
		padding: 18rpx;
		text-align: center;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 32rpx;
		color: #82848A;
		opacity: 1;
		width: 100%;
		background: #F4F4F5;
	}
</style>
